<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
    <link rel="stylesheet" href="../layui-v2.7.6/layui/css/layui.css">
</head>
<body>
<script type="text/javascript" src="../layui-v2.7.6/layui/layui.js"></script>

<form action="">
  <div class="layui-form" lay-filter="formTest">
    <select name="char" id="select-id" lay-filter = "test">
      <option  value="a">A</option>
      <option value="b">B</option>
    </select>

    <input name="email" type="text" lay-verify="email">
    <input name="switch" type="checkbox" checked lay-skin="switch" lay-filter="encrypt" title="是否加密">

      <input type="text" name="username" lay-verify="username">
      <input type="password" name="pass" lay-verify="pass">
      <input type="checkbox" name="agreement" lay-verify="required" title="同意">


      <div class="layui-form-item">
          <label class="layui-form-label">手机</label>
          <div class="layui-input-block">
              <input type="tel" name="phone" lay-verify="required|phone" class="layui-input demo-phone">
          </div>
      </div>
      <div class="layui-form-item">
          <label class="layui-form-label">验证码</label>
          <div class="layui-input-inline">
              <input type="text" name="vercode" lay-verify="required" class="layui-input">
          </div>
          <div class="layui-inline">
              <button type="button" class="layui-btn layui-btn-primary" lay-on="get-vercode">获取验证码</button>
          </div>
      </div>
    <button lay-submit lay-filter="submit">提交</button>
  </div>
</form>




<script>
  layui.use('form', function(){
    var $ = layui.$;
    var form = layui.form;

    // 定向渲染（一般当表单存在动态生成时，进行渲染）
    form.render($('#select-id')); // 传入需要渲染的相应表单元素的 jQuery 对象

    form.on('select(test)', function(data){
      console.log(data.value);
    });

    form.on('switch(encrypt)', function(data){
      console.log(data.elem); //得到checkbox原始DOM对象
      console.log(data.elem.checked); //开关是否开启，true或者false
      console.log(data.value); //开关value值，也可以通过data.elem.value得到
      console.log(data.othis); //得到美化后的DOM对象
    });

    form.on('submit(submit)', function(data){
      console.log(data)
      console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
      //只有有name的值submit里面才有
      console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
      console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}


        var field = data.field;//最重要的

        // 若需验证 checkbox 是否勾选，则需判断其值是否存在，如：
        if(!field.agreement){
            layer.msg('请同意');
            return false;
        }
      return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
    });

    //给表单赋值
    form.val("formTest", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
     "char":"a",
      "email":"123@qq.com"
    });

    //获取表单区域所有值
    var data1 = form.val("formTest");


      form.verify({
          username: function(value, item){ //value：表单的值、item：表单的DOM对象
              if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
                  return '用户名不能有特殊字符';
              }
              if(/(^\_)|(\__)|(\_+$)/.test(value)){
                  return '用户名首尾不能出现下划线\'_\'';
              }
              if(/^\d+\d+\d$/.test(value)){
                  return '用户名不能全为数字';
              }

              //如果不想自动弹出默认提示框，可以直接返回 true，这时你可以通过其他任意方式提示（v2.5.7 新增）
              if(value === 'xxx'){
                  alert('用户名不能为敏感词');
                  return true;
              }
          }

          //我们既支持上述函数式的方式，也支持下述数组的形式
          //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
          ,pass: [
              /^[\S]{6,12}$/
              ,'密码必须6到12位，且不能出现空格'
          ]
      });

      var util = layui.util;

      // 自定义普通事件
      util.on('lay-on', {
          "get-vercode": function(othis){
              var isValid = form.validate('.demo-phone');  // 注：v2.7.0 新增

              // 验证通过
              if(isValid){
                  layer.msg('手机号验证通过，执行发送验证码的操作');
              }
          }
      });

  });
</script>
</body>
</html>